<template>
  <div :id="id"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Echart',
  props: {
    id: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      required: false,
      default: 400
    },
    height: {
      type: Number,
      required: false,
      default: 300
    },
    options: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      echart: null
    }
  },
  mounted () {
    console.log('this.width' + '-' + this.id, this.width)
    this.handlerInit()
  },
  destroyed () {
    this.echart.dispose()
  },
  methods: {
    handlerInit () {
      // 初始化echarts实例
      this.echart = echarts.init(document.getElementById(this.id), null, {
        width: this.width,
        height: this.height
      })

      // 绘制图表
      this.echart.setOption(this.options)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>